<template>
    <div style="width: 100%">
      <el-tag
        style="margin-right: 4px"
        v-for="(item, i) in props.list"
        :key="i"
        :closable="!props.disabled"
        type="info"
        @close="handleClose(item)"
      >
        <span v-if="item[props.keyName].length < 30">
          {{ item[props.keyName] }}</span
        >
        <el-tooltip
          v-else
          class="box-item"
          effect="dark"
          :content="item[props.keyName]"
          placement="top"
        >
          <span class="text_ellipsis">{{ item[props.keyName] }}</span>
        </el-tooltip>
      </el-tag>
    </div>
  </template>
  
  <script setup lang="ts">
  const props = defineProps({
    list: { type: Object },
    disabled: {
      type: Boolean,
      default: false,
    },
    keyName: {
      type: String,
    },
    keyId: {
      type: String,
    },
  })
  const emit = defineEmits(['update:list'])
  const handleClose = (e) => {
    let arr = props.list.filter((x) => x[props.keyId] !== e[props.keyId])
    emit('update:list', arr)
  }
  </script>
  
  <style scoped></style>
  